<template>
  <div class="container">
    <div class="title">
      <p>
        数据来源：已选<i>{{ number }}</i
        >篇文献
      </p>
      <el-button type="primary">导出</el-button>
    </div>
    <div class="tab">
      <ul>
        <li
          v-for="(item, index) in menuList"
          :key="index"
          @click="handleTabs(index)"
          :class="tableIndex == index ? 'active' : ''"
        >
          {{ item }}
        </li>
        <el-divider v-if="tableIndex === 2"></el-divider>
        <p id="title" v-if="tableIndex === 2">学科分布</p>
        <div class="download1" v-if="tableIndex === 2">
      <el-button icon="el-icon-download"></el-button>
    </div>
        <div id="echarts1" v-if="tableIndex === 2"></div>
          <el-divider v-if="tableIndex === 2"></el-divider>
        <p id="title" v-if="tableIndex === 2">来源分布</p>
        <div class="download2" v-if="tableIndex === 2">
      <el-button icon="el-icon-download"></el-button>
    </div>
        <div id="echarts2" v-if="tableIndex === 2"></div>
      </ul>
    </div>
    
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "DataExcavate",
  data() {
    return {
      number: 3,
      menuList: ["关联信息分析", "指标分析", "文献关系图谱"],
      tableIndex: 0,
    };
  },
 
  methods: {
    handleTabs(index) {
      this.tableIndex = index;
      if(this.tableIndex===2){
        this.$nextTick(() => {
          this.echartsInit();
        });
      }
    },
    echartsInit() {
      echarts.init(document.getElementById("echarts1")).setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "学科分布",
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "社会科学" },
              { value: 735, name: "信息科技" },
              { value: 580, name: "经济与管理科学" },
              { value: 580, name: "其他" },
            ],
          },
        ],
      });
      echarts.init(document.getElementById("echarts2")).setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "学科分布",
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "情报杂志" },
              { value: 735, name: "北京交通大学学报社（社会科学版）" },
              { value: 580, name: "财会月刊" },
              { value: 580, name: "其他" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.title {
  margin: 15px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
}
.tab {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}
li {
  width: 200px;
  text-align: center;
  border: solid 1px #157dff;
  display: inline-block;
  line-height: 20px;
  padding: 10px;
}
li.active {
  background-color: #157dff;
  color: #fff;
}
i {
  color: #157dff;
  margin: 5px;
}
#echarts1,#echarts2 {
  width: 100%;
  height: 300px;
}
#title {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 10px;
}
.download1,.download2  {
  float: right;
  margin-top: -10%;
  margin-right: -45%;
  font-size: 50px;
  color: #bbb;
}
.el-button {
  border: none;
}
.el-divider--horizontal {
  margin:24px -350%;
  width: 1200%;
}
</style>